<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>客户签字</title>
  <include file="Tpl/AppHome/css.html" />
  <script src="/Public/App/assets/mui/mui.min.js"></script>
  <script src="/Public/App/assets/jquery/jquery.js"></script>
  <script src="/Public/App/assets/bootstrap/js/bootstrap.js"></script>
  </head>
</head>
<body id="user_sign" onload="redea()">
  <header>
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left white"></a>
    <h1 class="mui-title white" style="top: 0px;">客户签字</h1>
  </header>
  <section>
    <div class="mui-content">
      <div class="mui-scroll">
        <!--  <div class=" mui-media" id="value" style="word-break:break-all">ppp1111</div><br>-->
        <div style="margin-top:20px;">
          <h2>验收者签名：</h2>
          <div class="js-signature" id="mySignature"></div>
          <div>
            <!--<button type="button" class="mui-btn" id="myBackColor">选择背景颜色</button>
              <button type="button" class="mui-btn" id="myColor">选择字体颜色</button>-->
            <div id="colorpanel" style="position:absolute;z-index:99;display:none"></div>
            <button type="button" class="mui-btn" id="myEmpty">重写</button>
            <button type="button" class="mui-btn" id="mySave">保存</button>
            <input type="button" class="mui-btn" id="tijiao" value="确认提交" disabled="disabled">
          </div>
          <div id="myImg" style="height:120px;"></div>
        </div>
      </div>
    </div>
  </section>

</body>
<script type="text/javascript">
  mui.init();
  mui.plusReady(function () {

  });
  function redea() {
    new WritingPad();
  }
</script>
</html>
<script type="text/javascript">
  /**
   * 功能：签名canvas面板初始化,为WritingPad.js手写面板js服务。
   */

  (function (window, document, jQuery) {
    'use strict';

    // 获取绘制屏幕的规则间隔
    window.requestAnimFrame = (function (callback) {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimaitonFrame ||
        function (callback) {
          window.setTimeout(callback, 1000 / 60);
        };
    })();

    /*
    * 插件构造函数
    */

    var pluginName = 'jqSignature',
      defaults = {
        lineColor: '#222222',
        lineWidth: 1,
        border: '1px dashed #CCFF99',
        background: '#FFFFFF',
        width: 500,
        height: 200,
        autoFit: false
      },
      canvasFixture = '<canvas></canvas>';

    function Signature(element, options) {
      // DOM元素/对象
      this.element = element;
      this.jQueryelement = jQuery(this.element);
      this.canvas = false;
      this.jQuerycanvas = false;
      this.ctx = false;
      // Drawing state
      this.drawing = false;
      this.currentPos = {
        x: 0,
        y: 0
      };
      this.lastPos = this.currentPos;
      // 确定插件的设置
      this._data = this.jQueryelement.data();
      this.settings = jQuery.extend({}, defaults, options, this._data);
      // 初始化插件
      this.init();
    }

    Signature.prototype = {
      // 初始化签名画布
      init: function () {
        // 设置画布
        this.jQuerycanvas = jQuery(canvasFixture).appendTo(this.jQueryelement);
        this.jQuerycanvas.attr({
          width: this.settings.width,
          height: this.settings.height
        });
        this.jQuerycanvas.css({
          boxSizing: 'border-box',
          width: this.settings.width + 'px',
          height: this.settings.height + 'px',
          border: this.settings.border,
          background: this.settings.background,
          cursor: 'crosshair'
        });
        //将画布安装到父宽
        if (this.settings.autoFit === true) {
          this._resizeCanvas();
        }
        this.canvas = this.jQuerycanvas[0];
        this._resetCanvas();
        //设置鼠标事件
        this.jQuerycanvas.on('mousedown touchstart', jQuery.proxy(function (e) {
          this.drawing = true;
          this.lastPos = this.currentPos = this._getPosition(e);
        }, this));
        this.jQuerycanvas.on('mousemove touchmove', jQuery.proxy(function (e) {
          this.currentPos = this._getPosition(e);
        }, this));
        this.jQuerycanvas.on('mouseup touchend', jQuery.proxy(function (e) {
          this.drawing = false;
          // 触发更改事件
          var changedEvent = jQuery.Event('jq.signature.changed');
          this.jQueryelement.trigger(changedEvent);
        }, this));
        // 触摸画布时防止文件滚动
        jQuery(document).on('touchstart touchmove touchend', jQuery.proxy(function (e) {
          if (e.target === this.canvas) {
            e.preventDefault();
          }
        }, this));
        // 开始画
        var that = this;
        (function drawLoop() {
          window.requestAnimFrame(drawLoop);
          that._renderCanvas();
        })();
      },
      //重置的画布
      clearCanvas: function () {
        this.canvas.width = this.canvas.width;
        this._resetCanvas();
      },
      // 把画布的内容为Base64编码数据的URL
      getDataURL: function () {
        return this.canvas.toDataURL();
      },

      reLoadData: function () {
        this.jQuerycanvas.remove();
        this._data = this.jQueryelement.data();
        this.init();
      },
      // 获取鼠标/触摸的位置
      _getPosition: function (event) {
        var xPos, yPos, rect;
        rect = this.canvas.getBoundingClientRect();
        event = event.originalEvent;
        // 触摸事件
        if (event.type.indexOf('touch') !== -1) { // event.constructor === TouchEvent
          xPos = event.touches[0].clientX - rect.left;
          yPos = event.touches[0].clientY - rect.top;
        }
        // 鼠标事件
        else {
          xPos = event.clientX - rect.left;
          yPos = event.clientY - rect.top;
        }
        return {
          x: xPos,
          y: yPos
        };
      },
      // 将签名渲染到画布
      _renderCanvas: function () {
        if (this.drawing) {
          this.ctx.moveTo(this.lastPos.x, this.lastPos.y);
          this.ctx.lineTo(this.currentPos.x, this.currentPos.y);
          this.ctx.stroke();
          this.lastPos = this.currentPos;
        }
      },
      //重置画布上下文
      _resetCanvas: function () {
        this.ctx = this.canvas.getContext("2d");
        this.ctx.strokeStyle = this.settings.lineColor;
        this.ctx.lineWidth = this.settings.lineWidth;
      },
      // 调整画布元素的大小
      _resizeCanvas: function () {
        var width = this.jQueryelement.outerWidth();
        this.jQuerycanvas.attr('width', width);
        this.jQuerycanvas.css('width', width + 'px');
      }
    };

    /*
    * 插件和初始化
    */

    jQuery.fn[pluginName] = function (options) {
      var args = arguments;
      if (options === undefined || typeof options === 'object') {
        return this.each(function () {
          if (!jQuery.data(this, 'plugin_' + pluginName)) {
            jQuery.data(this, 'plugin_' + pluginName, new Signature(this, options));
          }
        });
      }
      else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
        var returns;
        this.each(function () {
          var instance = jQuery.data(this, 'plugin_' + pluginName);
          if (instance instanceof Signature && typeof instance[options] === 'function') {
            var myArr = Array.prototype.slice.call(args, 1);
            returns = instance[options].apply(instance, myArr);
          }
          if (options === 'destroy') {
            jQuery.data(this, 'plugin_' + pluginName, null);
          }
        });
        return returns !== undefined ? returns : this;
      }
    };

  })(window, document, jQuery);
</script>
<script type="text/javascript">
  /**
   * 功能：使用该jQuery插件来制作在线签名或涂鸦板，用户绘制的东西可以用图片的形式保存下来。
   */

  var WritingPad = function () {

    var current = null;

    jQuery(function () {

      initTable();

      initSignature();

      if (jQuery(".modal")) {
        jQuery(".modal").modal("toggle");
      } else {
        mui.alert("没用手写面板");
      }

      jQuery(document).on("click", "#mySave", null, function () {

        var myImg = jQuery("#myImg").empty();
        var dataUrl = jQuery('.js-signature').jqSignature('getDataURL');
        console.log(dataUrl)
        var img = jQuery('<img>').attr("src", dataUrl);
        console.log(img)
        img.css("height","120px")
        jQuery(myImg).append(img);

      });

      jQuery(document).on("click", "#myEmpty", null, function () {
        jQuery('.js-signature').jqSignature('clearCanvas');
      });

 
      


      // jQuery(document).on("click", "#btnSave", null, function () {

      //   jQuery('#colorpanel').css("display", "none");
      //   var typeData = jQuery("#btnSave").data("sender");
      //   var HexColor = jQuery("input[name=HexColor]").val();
      //   var data = jQuery(".js-signature").data();
      //   if (typeData == "#myColor") {
      //     data["plugin_jqSignature"]["settings"]["lineColor"] = HexColor;
      //     jQuery('.js-signature').jqSignature('reLoadData');
      //   }
      //   if (typeData == "#myBackColor") {

      //     data["plugin_jqSignature"]["settings"]["background"] = HexColor;
      //     jQuery('.js-signature').jqSignature('reLoadData');
      //   }
      // });

      jQuery("#mymodal").on('hide.bs.modal', function () {
        jQuery("#colorpanel").remove();
        jQuery("#mymodal").remove();
        jQuery("#myTable").remove();
      });

    });

    function initTable() {
      var colorTable = "";
      var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF');
      var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF');
      for (var i = 0; i < 2; i++) {
        for (var j = 0; j < 6; j++) {
          colorTable = colorTable + '<tr height=12>';
          colorTable = colorTable + '<td width=11 style="background-color:#000000"></td>';

          if (i == 0) {
            colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '"></td>';
          }
          else {
            colorTable = colorTable + '<td width=11 style="background-color:#' + SpColorHex[j] + '"></td>';
          }

          //colorTable = colorTable + '<td width=11 style="background-color:#000000"></td>';

          for (var k = 0; k < 3; k++) {
            for (l = 0; l < 6; l++) {
              colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '"></td>';
            }
          }
          colorTable = colorTable + '</tr>';


        }
      }
      colorTable =
        '<table border="1" id="myTable" cellspacing="0" cellpadding="0" style="border-collapse: collapse;cursor:pointer;" bordercolor="000000">'
        + colorTable + '</table>' +
        '<table width=225 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-collapse: collapse;background-color:#000000">' +
        '<tr style="height:30px">' +
        '<td colspan=21 bgcolor=#cccccc>' +

        '<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">' +
        '<tr>' +
        '<td width="3"><input type="text" name="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>' +
        '<td width="3"><input type="hidden" name="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000" ></td>' +
        '<td width="3"><button type="button" class="btn btn-primary btn-sm" id="btnSave">确认</button></td>' +
        '</tr>' +
        '</table>' +

        '</td>' +
        '</tr>' +
        '</table>';
      jQuery("#colorpanel").append(colorTable);
    }

    function initSignature() {

      if (window.requestAnimFrame) {
        var signature = jQuery("#mySignature");
        signature.jqSignature({height: 330, border: '1px solid #CDC9A5', background: '#EEEED1', lineColor: '#969696', lineWidth: 2, autoFit: true });
      } else {

        mui.alert("请加载jq-signature.js");
        return;
      }
    }

    function showRGB(arr) {
      hexcode = "#";
      for (x = 0; x < 3; x++) {
        var n = arr[x];
        if (n == "") n = "0";
        if (parseInt(n) != n)
          return mui.alert("RGB颜色值不是数字！");
        if (n > 255)
          return mui.alert("RGB颜色数字必须在0-255之间！");
        var c = "0123456789ABCDEF", b = "", a = n % 16;
        b = c.substr(a, 1); a = (n - a) / 16;
        hexcode += c.substr(a, 1) + b
      }
      return hexcode;
    }

    function init() {


    }

    return {
      init: function () {
        init();
      }
    };
  }
</script>